<!--
  教学任务下的课堂主页面
-->
<template>
  <div class="container">
    <div class="addBtn">
      <div class="mt-4">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入课堂名称"
          @select="handleSelect"
        />
      </div>
      <el-button type="primary" @click="handleAddClassRoom">添加课堂</el-button>
    </div>
    <div class="lessonList">
      <ul class="lesson-item">
        <li v-for="lesson in lessonList" :key="lesson.id">
          <Lesson :lesson="lesson" @editRow="editRow" @getLessonList="getLessonList"></Lesson>
        </li>
      </ul>
    </div>
  </div>
  <AddDialog
    ref="dia"
    @getLessonList="getLessonList"
  />
</template>

<script lang='ts' setup>
import AddDialog
  from '@/views/page/tearchertack/mycourse/details/teachingdetails/classroom/AddorEditDialog.vue';
import Lesson
  from '@/views/page/tearchertack/mycourse/details/teachingdetails/classroom/Lesson.vue';
import {
  ref, getCurrentInstance, onMounted,
} from 'vue';
import Request from '@/api/request/request';

const dia = ref();
const { proxy } = getCurrentInstance();

// 课程集合
let lessonList = ref([]);
const getLessonList = async () => {
  const resData: any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOL_SCHOOLTEACHINGTASKLESSON).get();
  if (resData.code === 200) {
    lessonList.value = resData.data.data;
  }
};

onMounted(() => {
  getLessonList();
});

// 添加课堂按钮点击事件：打开弹窗
const handleAddClassRoom = () => {
  dia.value.addOPen();
};

// 编辑课堂
const editRow = (id:number) => {
  dia.value.editOPen(id);
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 添加按钮样式
  .addBtn {
    width: 100%;
    display: flex;
    justify-content: space-between;

    // 添加课堂按钮
    .el-button {
      width: 160px;
      margin: 10px 30px 0 10px;
    }

    // 课堂搜索框
    .mt-4 {
      margin: 10px 10px 0 10px;
    }
  }
  // 课堂信息样式
  .lessonList {
    height: 540px;
    overflow-x: hidden;
    overflow-y: scroll;
    // 包裹课堂卡片的ul样式
    .lesson-item {
      // 弹性布局+竖排列+垂直居中
      display: flex;
      flex-direction: column;
      justify-content: center;
      // 开启自减模式，就是设置内外边距，会缩减盒子内容的宽度，而不影响其他元素
      box-sizing: border-box;
      margin: 0;
      // 内边距：上 右 下 左
      padding: 10px 10px 0 10px;
      width: 100%;
      list-style: none;
      // 课堂卡片样式：这里的只是简单设置边距，具体样式在Lesson组件中
      li {
        margin-bottom: 20px;
        &:last-child{ // 最后一个课堂卡片下外边距取消
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
